<template>
  <el-drawer
    v-model="visible"
    title="跟进详情"
    size="56%"
    :before-close="handleClose"
  >
    <div class="drawer-content">
      <!-- 企业基本信息 - 使用卡片式布局 -->
      <div class="info-card">
        <div class="info-row">
          <span class="label"><i class="el-icon-project"></i> 项目：</span>
          <span>{{ detail.department }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-user"></i> 招商员：</span>
          <span>{{ detail.investmentStaff }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-user"></i> 陪访人员：</span>
          <span>{{ detail.accompanyStaff }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-company"></i> 企业名称：</span>
          <span>{{ detail.companyName }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-contact"></i> 联系人：</span>
          <span>{{ detail.contactPerson }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-contact"></i> 客户类型：</span>
          <span>{{ detail.contactPerson }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-source"></i> 客户来源：</span>
          <span>{{ detail.customerSource }}</span>
        </div>
        <div class="info-row">
          <span class="label"><i class="el-icon-progress"></i> 客户进度：</span>
          <span>{{ detail.customerProgress }}</span>
        </div>
        <!-- <div class="info-row">
          <span class="label"><i class="el-icon-clock"></i> 跟进次数：</span>
          <span>{{ detail.followUpCount }} 次</span>
        </div> -->

        <!-- 替换选中的注释行 -->
        <div class="info-row statistics-cards">
          <span class="label"><i class="el-icon-data-analysis"></i> 跟进次数统计：</span>
          <div class="cards-container">
            <div class="stat-card">
              <div class="card-value">{{ detail.staticalTimes?.[0] || 0 }}</div>
              <div class="card-label">总跟进次数</div>
            </div>
            <div class="stat-card">
              <div class="card-value">{{ detail.staticalTimes?.[1] || 0 }}</div>
              <div class="card-label">近1个月</div>
            </div>
            <div class="stat-card">
              <div class="card-value">{{ detail.staticalTimes?.[2] || 0 }}</div>
              <div class="card-label">近2个月</div>
            </div>
            <div class="stat-card">
              <div class="card-value">{{ detail.staticalTimes?.[3] || 0 }}</div>
              <div class="card-label">近3个月</div>
            </div>
          </div>
        </div>

      </div>

      <!-- 跟进核心信息区 -->
      <div class="follow-section">
        <div class="follow-item">
          <div class="item-label">跟进方式</div>
          <div class="item-value" :class="getFollowTypeClass(detail.followUpType)">
            {{ detail.followUpType }}
          </div>
        </div>

        <div class="follow-item">
          <div class="item-label">跟进时间</div>
          <div class="item-value">{{ formatDateTime(detail.followUpTime) }}</div>
        </div>

        <div class="follow-item">
          <div class="item-label">跟进内容</div>
          <div class="item-value content-text">{{ detail.followUpContent }}</div>
        </div>

        <div class="follow-item">
          <div class="item-label">打卡地点</div>
          <div class="item-value">{{ detail.address }}</div>
        </div>

        <div class="follow-item image-item">
          <div class="item-label">打卡图片</div>
          <div class="item-value">
          <img 
                v-if="detail.attachmentUrl" 
                :src="detail.attachmentUrl" 
                alt="打卡图片" 
                style="max-width: 150px; height: auto; cursor: pointer;" 
                @click="openImageDialog(detail.attachmentUrl)" 
              />            <div v-else class="no-image">暂无图片</div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="dialogVisible"
        title="打卡图片"
        width="60%"
      >
        <img :src="imageUrl" alt="大图预览" style="max-width: 100%; height: auto;" />
      </el-dialog>

      <!-- 相关跟进列表 -->
      <div class="related-follow">
        <div class="section-title">相关跟进</div>
        <el-table :data="detail.customerFollowUpDOList" border style="width: 100%">
        <el-table-column prop="investmentStaff" label="招商员" show-overflow-tooltip />
        <el-table-column prop="investmentTarget" label="客户类型" show-overflow-tooltip />
        <el-table-column 
          prop="followUpTime" 
          label="跟进时间" 
          show-overflow-tooltip 
          :formatter="formatDateTime1"
        />
        <el-table-column prop="followUpType" label="跟进方式" show-overflow-tooltip />
        <el-table-column prop="followUpContent" label="跟进内容" show-overflow-tooltip />
        <el-table-column prop="followUpCount" label="总跟进次数" show-overflow-tooltip />
        <el-table-column prop="customerSource" label="客户来源" show-overflow-tooltip />
        <el-table-column prop="customerProgress" label="客户进度" show-overflow-tooltip />
        <el-table-column prop="accompanyStaff" label="陪访人员" show-overflow-tooltip />
        <el-table-column prop="companyName" label="企业名称" show-overflow-tooltip />



          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click="viewFollowDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { getById } from "@/api/AttractInvestment/follow/index.js";
import { ElLoading } from 'element-plus';

const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  // 替换 ISO 时间格式中的 T 为 空格
  return dateTime.replace('T', ' ');
};
const formatDateTime1 = (row, column, cellValue) => {
  if (!cellValue) return '';
  // 替换 ISO 时间格式中的 T 为 空格
  return cellValue.replace('T', ' ');
};

//图片
const dialogVisible = ref(false);
const imageUrl = ref('');

const openImageDialog = (url) => {
  imageUrl.value = url;
  dialogVisible.value = true;
};

const props = defineProps({
  detail: {
    type: Object,
    required: true,
  },
  relatedFollowList: {
    type: Array,
    default: () => [],
  },
});

// 响应式 detail，允许内部修改
const detail = ref(props.detail);
// 监听 props.detail 变化
watch(() => props.detail, (newVal) => {
  detail.value = newVal;
});

const visible = ref(false);

const open = () => {
  visible.value = true;
};

const handleClose = (done) => {
  visible.value = false;
  done();
};

const emit = defineEmits(['viewFollow']);

// const viewFollowDetail = (row) => {
//   emit('viewFollow', row);
//   visible.value = false;
// };

const viewFollowDetail = async (row) => {
  // 创建加载提示
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  try {
    const res = await getById(row);
    if (res && res.code === 200) {
      detail.value = res.data;
    } else {
      ElMessage.error("获取详情失败");
    }
  } catch (error) {
    console.error("获取企业详情失败:", error);
    ElMessage.error("网络错误，请重试");
  } finally {
    // 关闭加载提示
    loading.close();
  }
};

// 根据跟进方式设置样式
const getFollowTypeClass = (type) => {
  switch (type) {
    case '上门拜访':
      return 'type-visit';
    case '来访接待':
      return 'type-receive';
    case '电话沟通':
      return 'type-call';
    default:
      return '';
  }
};

defineExpose({
  open,
});
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}

.info-card {
  background: #f9fafa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.label {
  font-weight: 500;
  color: #666;
  min-width: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.follow-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.follow-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.item-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.item-value {
  font-size: 14px;
  color: #303133;
  word-break: break-word;
}

.content-text {
  white-space: pre-line;
}

.image-item .item-value {
  display: flex;
  align-items: center;
}

.no-image {
  color: #999;
  font-size: 14px;
  padding: 10px;
}

.type-visit {
  background-color: #ecf5ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 4px;
}

.type-receive {
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 2px 8px;
  border-radius: 4px;
}

.type-call {
  background-color: #fdf6ec;
  color: #e6a23c;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 添加到<style scoped>中 */
.progress-container {
  flex: 1;
}

.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.progress-item span:first-child {
  width: 80px;
}

.progress-item span:last-child {
  width: 30px;
  text-align: right;
  margin-left: 10px;
}

.statistical-table {
  width: 100%;
  margin-top: 10px;
}

.statistics-cards {
  align-items: flex-start;
}

.cards-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-card {
  background: #ffffff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  min-width: 80px;
}

.card-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
}

.card-label {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6; /* 加深边框颜色 */
  padding: 8px;
  border-radius: 4px;
}
.follow-item {
  display: flex;
  align-items: left;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6; /* 加深边框颜色 */
  padding: 8px;
  border-radius: 4px;
}
</style>